<template>
	<view>
		<!-- 菜单导航 -->
		<view class="inv-top-menu-bar">
			<view class="top-menu" ref="manageNav">
				<view class="top-menu-list">
					<view :class="item.active ? 't-btn active' : 't-btn'" v-for="(item, index) in navList" :key="index"
						@click=" handleNavActive(index)">
						{{ item.text }}
					</view>
				</view>
			</view>
		</view>
		<!-- 菜单内容 -->
		<view v-if="navStatusIndex == 1">
			<JobApply></JobApply>
		</view>
		<view v-if="navStatusIndex == 0">
			<PersonalInterview></PersonalInterview>
		</view>
		<view v-if="navStatusIndex == 2">
			<AttentionMe></AttentionMe>
		</view>
		<view v-if="navStatusIndex == 3">
			<ViewJob></ViewJob>
		</view>
	</view>
</template>
<script>
	import JobApply from './components/JobApply'
	import PersonalInterview from './components/PersonalInterview'
	import AttentionMe from './components/AttentionMe'
	import ViewJob from './components/ViewJob'
	import {
		getParam
	} from '../utils/index.js'
	export default {
		components: {
			PersonalInterview,
			AttentionMe,
			ViewJob,
			JobApply
		},
		data() {
			return {
				navStatusIndex: 0, // 初始化当前导航
				navTitle: '',
				navList: [ // 导航列表
					{
						text: '面试邀请',
						href: '/personal/JobManagement/PersonalInterview', //0
						active: false
					},
					{
						text: '已申请',
						href: '/personal/JobManagement/JobApply', //1
						active: true
					},
					{
						text: '被关注',
						href: '/personal/JobManagement/AttentionMe', //2
						active: false
					},
					{
						text: '足迹',
						href: '/personal/JobManagement/ViewJob', //3
						active: false
					}
				]
			}
		},
		mounted() {
			// 选中当前导航菜单 
			this.handleNavActive(parseInt(getParam().navStatus))
		},
		methods: {
			// 导航跳转
			handleNavActive(navIndex) {
				this.navStatusIndex = navIndex
				this.navList.forEach((item, index) => {
					item.active = false
				})
				this.navList[navIndex].active = true
				switch (navIndex) {
					case 0:
						this.navTitle = '面试邀请'
						break
					case 1:
						this.navTitle = '求职管理'
						break
					case 2:
						this.navTitle = '被关注'
						break
					case 3:
						this.navTitle = '浏览足迹'
						break
					default:
						break
				}
				uni.setNavigationBarTitle({
					title: this.navTitle
				});
			},
		}
	}
</script>
<style lang="scss" scoped>
	.inv-top-menu-bar {
		background: #ffffff;

		.top-menu {
			overflow: hidden;
			overflow-x: scroll;
			-webkit-overflow-scrolling: touch;

			&::-webkit-scrollbar {
				display: none;
			}
		}

		.top-menu-list {
			white-space: nowrap;

			.t-btn {
				position: relative;
				white-space: nowrap;
				display: inline-block;
				text-align: center;
				color: #666666;
				font-size: 30rpx;
				text-decoration: none;
				padding: 22rpx 33rpx 30rpx;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);

				&::after {
					position: absolute;
					left: 50%;
					bottom: 12rpx;
					width: 32rpx;
					height: 6rpx;
					background-color: #1787fb;
					border-radius: 100%;
					transform: translate(-50%, 0);
				}

				&.active {
					color: #1787fb;

					&::after {
						content: ' ';
					}
				}
			}
		}
	}
</style>
